import React, { useState } from "react";
import style from "../order/index.module.css";
import { useNavigate } from "react-router-dom";
import { NavBar, Space, Toast, List, Tag } from "antd-mobile";
import { Checkbox } from "antd-mobile";
import { NoticeBar } from "antd-mobile";
import { Button, Card } from "antd-mobile";
import { SubmitBar } from "react-vant";
function Index() {
  const navigate = useNavigate();
  const back = () => navigate(-1);
  // const [message,setMessage] = useState('')
  const [flag, setFlag] = useState(false);
  const price = 375;
  // const personList = [['A','B','C','D','E']]
  const id = Math.random().toString().slice(2);
  const goPay = () => {
    navigate(`/pay?price=${price}&id=${id}&title=订单数据`);
  };
  return (
    <div>
      <NavBar onBack={back}>填写订单</NavBar>
      <NoticeBar
        content="余票紧张，当前车次余票紧张，建议尽快预定"
        color="alert"
      />

      <div>
        <Card> 1程 02月18日 北京南→济南西 二等座 </Card>
        <Card> 2程 02月18日 济南西→上海...二等座（补票） </Card>
        <span>车票￥541 出行无忧￥62</span>
      </div>

      <Card title="选择乘客">
        <List>
          <List.Item
            description={"15664631646894512"}
            extra={<Checkbox onClick={flag} />}
          >
            <span>张三</span>
          </List.Item>

          <List.Item description={"62852742962296345"} extra={<Checkbox />}>
            <span>李四</span>
          </List.Item>

          <List.Item description={"854568521239635654"} extra={<Checkbox />}>
            <span>王五</span>
          </List.Item>
        </List>

        <Button
          onClick={() => navigate("/person")}
          block
          color="primary"
          size="large"
        >
          添加乘客（成人/学生/儿童）
        </Button>
      </Card>

      <Card title="选择座位">
        <div onChange={setFlag} className={style.tag}>
          <Tag>A</Tag> <Tag>B</Tag> <Tag>C</Tag> <Tag>D</Tag> <Tag>E</Tag>
        </div>
      </Card>

      <Button onClick={() => navigate("/message")} color="success" fill="solid">
        提交
      </Button>

      <SubmitBar
        price={price * 100}
        onSubmit={() => goPay()}
        buttonText="去支付"
      />
    </div>
  );
}

export default Index;
